<template>
  <div class="app-container">
    <div class="header">
      <h1>玉米病害识别系统</h1>
      <p>上传玉米叶片图片，获取病害识别结果与模型分析</p>
    </div>

    <div class="content">
      <UploadCard @result="handleResult" />
      <transition name="slide-fade">
        <ResultTable v-if="result" :result="result" class="result"/>
      </transition>
    </div>

    <div class="footer">

      <p>© 2025 玉米病害识别系统 | 基于机器学习技术</p>
    </div>
  </div>
</template>

<script setup>
import UploadCard from './components/UploadCard.vue'
import ResultTable from './components/ResultTable.vue'
import { ref } from 'vue'

const result = ref(null)


function handleResult(data) {
  result.value = data
}
</script>


<style scoped>
.app-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
}

.header h1 {
  color: #2c6e49;
  font-size: 2.2rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.header p {
  color: #5a7d5a;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;

}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

.footer {
  text-align: center;
  margin-top: 50px;
  padding: 20px;
  color: #888;
  font-size: 0.9rem;
}
.result{
  display: flex;
  position: fixed;
  top: 31vh;
  left: 57vw;

}

.slide-fade-enter-active {
  transition: all 0.5s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
</style>


<!--这是包含健康检查的，但是存在问题。暂且废弃-->
<!--<template>-->
<!--  <div class="app-container">-->
<!--    <div class="header">-->
<!--      <h1>玉米病害识别系统</h1>-->
<!--      <p>上传玉米叶片图片，获取病害识别结果与模型分析</p>-->
<!--    </div>-->

<!--    <div class="content">-->
<!--      <UploadCard @result="handleResult" />-->
<!--      <transition name="slide-fade">-->
<!--        <ResultTable v-if="result" :result="result" />-->
<!--      </transition>-->
<!--    </div>-->

<!--    <div class="footer">-->
<!--      <div class="health-check">-->
<!--        <div class="health-status" :class="healthStatus">-->
<!--          <i :class="healthIcon"></i>-->
<!--          <span>{{ healthMessage }}</span>-->
<!--        </div>-->
<!--        <div class="last-checked">-->
<!--          <span v-if="lastChecked">最后检查: {{ lastChecked }}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <p>© 2023 玉米病害识别系统 | 基于机器学习技术</p>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import UploadCard from './components/UploadCard.vue'-->
<!--import ResultTable from './components/ResultTable.vue'-->
<!--import { ref, onMounted, onBeforeUnmount } from 'vue'-->
<!--import axios from 'axios'-->

<!--const result = ref(null)-->
<!--const backendHealth = ref('checking') // 'healthy', 'unhealthy', 'checking'-->
<!--const lastChecked = ref(null)-->

<!--// 健康状态映射-->
<!--const healthStatusMap = {-->
<!--  healthy: {-->
<!--    class: 'healthy',-->
<!--    icon: 'el-icon-success',-->
<!--    message: '后端服务运行正常'-->
<!--  },-->
<!--  unhealthy: {-->
<!--    class: 'unhealthy',-->
<!--    icon: 'el-icon-error',-->
<!--    message: '后端服务异常'-->
<!--  },-->
<!--  checking: {-->
<!--    class: 'checking',-->
<!--    icon: 'el-icon-loading',-->
<!--    message: '正在检查后端服务状态...'-->
<!--  }-->
<!--}-->

<!--// 计算属性-->
<!--const healthStatus = computed(() => healthStatusMap[backendHealth.value].class)-->
<!--const healthIcon = computed(() => healthStatusMap[backendHealth.value].icon)-->
<!--const healthMessage = computed(() => healthStatusMap[backendHealth.value].message)-->

<!--// 健康检查函数-->
<!--async function checkBackendHealth() {-->
<!--  backendHealth.value = 'checking'-->
<!--  try {-->
<!--    const response = await axios.get('http://localhost:8001/healthz', {-->
<!--      timeout: 3000 // 3秒超时-->
<!--    })-->

<!--    if (response.data && response.data.status === 'ok') {-->
<!--      backendHealth.value = 'healthy'-->
<!--    } else {-->
<!--      backendHealth.value = 'unhealthy'-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error('健康检查失败:', error)-->
<!--    backendHealth.value = 'unhealthy'-->
<!--  }-->

<!--  // 更新最后检查时间-->
<!--  lastChecked.value = new Date().toLocaleTimeString()-->
<!--}-->

<!--// 定时检查-->
<!--let healthCheckInterval = null-->

<!--onMounted(() => {-->
<!--  // 初始检查-->
<!--  checkBackendHealth()-->

<!--  // 每30秒检查一次-->
<!--  healthCheckInterval = setInterval(() => {-->
<!--    checkBackendHealth()-->
<!--  }, 30000)-->
<!--})-->

<!--onBeforeUnmount(() => {-->
<!--  if (healthCheckInterval) {-->
<!--    clearInterval(healthCheckInterval)-->
<!--  }-->
<!--})-->

<!--function handleResult(data) {-->
<!--  result.value = data-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.app-container {-->
<!--  max-width: 900px;-->
<!--  margin: 0 auto;-->
<!--  padding: 30px 20px;-->
<!--  min-height: 100vh;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.header {-->
<!--  text-align: center;-->
<!--  margin-bottom: 40px;-->
<!--  padding: 20px;-->
<!--}-->

<!--.header h1 {-->
<!--  color: #2c6e49;-->
<!--  font-size: 2.2rem;-->
<!--  margin-bottom: 10px;-->
<!--  font-weight: 700;-->
<!--}-->

<!--.header p {-->
<!--  color: #5a7d5a;-->
<!--  font-size: 1.1rem;-->
<!--  max-width: 600px;-->
<!--  margin: 0 auto;-->
<!--}-->

<!--.content {-->
<!--  flex: 1;-->
<!--}-->

<!--.footer {-->
<!--  text-align: center;-->
<!--  margin-top: 50px;-->
<!--  padding: 20px;-->
<!--  color: #888;-->
<!--  font-size: 0.9rem;-->
<!--  position: relative;-->
<!--}-->

<!--.health-check {-->
<!--  margin-bottom: 15px;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--  gap: 8px;-->
<!--}-->

<!--.health-status {-->
<!--  display: inline-flex;-->
<!--  align-items: center;-->
<!--  gap: 8px;-->
<!--  padding: 6px 15px;-->
<!--  border-radius: 20px;-->
<!--  font-weight: 500;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.health-status i {-->
<!--  font-size: 16px;-->
<!--}-->

<!--.health-status.healthy {-->
<!--  background-color: #e8f5e9;-->
<!--  color: #2e7d32;-->
<!--}-->

<!--.health-status.unhealthy {-->
<!--  background-color: #ffebee;-->
<!--  color: #c62828;-->
<!--}-->

<!--.health-status.checking {-->
<!--  background-color: #fff8e1;-->
<!--  color: #f9a825;-->
<!--}-->

<!--.last-checked {-->
<!--  font-size: 12px;-->
<!--  color: #aaa;-->
<!--}-->

<!--.slide-fade-enter-active {-->
<!--  transition: all 0.5s ease-out;-->
<!--}-->

<!--.slide-fade-leave-active {-->
<!--  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);-->
<!--}-->

<!--.slide-fade-enter-from,-->
<!--.slide-fade-leave-to {-->
<!--  transform: translateY(20px);-->
<!--  opacity: 0;-->
<!--}-->
<!--</style>-->